<!-- home page f1的顶部条 -->
<template>
  <div class="home-f1-container">
    <el-row :span="18" class="f1-adv-img-container">
      <img src="@/assets/images/e-commerce/home-f1.png" class="f1-adv-img" />
    </el-row>
    <!-- 设置row容器中的元素垂直居中 -->
    <el-row type="flex" align="middle" class="f1-down-container">
      <el-col :span="12">
        <el-button link>
          <SvgIcon name="loudspeaker" color="red"></SvgIcon>
          <span>关于公司名称及信息被盗用的严正声明。</span>
        </el-button>
      </el-col>
      <el-col :span="12">
        <el-button link class="f1-adv-notice-right-btn">
          <SvgIcon name="loudspeaker" color="red"></SvgIcon>
          <span>链接</span>
          <!-- 分隔符 -->
          <span class="f1-adv-notice-right-btn-split">|</span>
        </el-button>
        <el-button link class="f1-adv-notice-right-btn">
          <SvgIcon name="loudspeaker" color="red"></SvgIcon>
          <span>链接</span>
          <span class="f1-adv-notice-right-btn-split">|</span>
        </el-button>
        <el-button link class="f1-adv-notice-right-btn">
          <SvgIcon name="loudspeaker" color="red"></SvgIcon>
          <span>链接</span>
          <span class="f1-adv-notice-right-btn-split">|</span>
        </el-button>
        <el-button link class="f1-adv-notice-right-btn">
          <SvgIcon name="loudspeaker" color="red"></SvgIcon>
          <span>链接</span>
          <span class="f1-adv-notice-right-btn-split">|</span>
        </el-button>
        <el-button link class="f1-adv-notice-right-btn">
          <SvgIcon name="loudspeaker" color="red"></SvgIcon>
          <span>链接</span>
          <span class="f1-adv-notice-right-btn-split">|</span>
        </el-button>
        <el-button link class="f1-adv-notice-right-btn">
          <SvgIcon name="loudspeaker" color="red"></SvgIcon>
          <span>链接</span>
          <span class="f1-adv-notice-right-btn-split">|</span>
        </el-button>
        <el-button link class="f1-adv-notice-right-btn">
          <SvgIcon name="loudspeaker" color="red"></SvgIcon>
          <span>链接</span>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.home-f1-container {
  width: 100%;
  height: 120px;
  border: 1px solid #000000;

  .f1-adv-img-container {
    width: 100%;
    .f1-adv-img {
      width: 100%;
    }
    border: 1px solid #000000;
  }
  .f1-down-container{
    border: 1px solid #000000;
  }
 
}
</style>
